<template>
    <div class="chat-wrapper">
      <div class="chat-top">
        <div class="AITip">智能交互系统</div>
        <div class="chat-main" ref="chatList">
          <div v-if="!chatList.length" class="no-message">
            <span>欢迎使用</span>
            <span>智能交互系统</span>
            <img src="https://via.placeholder.com/300x14/16447C/01FFFF?text=light+effect" alt="light effect" />
          </div>
          <div
            v-for="(item, index) in chatList"
            class="chat-item"
            :class="[index%2===1 ? 'question' :'answer']"
            :key="index"
          >
            <div class="header-img-wrapper">
              <div class="wrapper-img">
                <img v-if="index%2===1" :src="otherImg" class="header-img" />
              </div>
            </div>
            <div class="content">
              <div class="content-width">{{ item.content }}</div>
              <div class="indicator"></div>
            </div>
            <div class="header-img-wrapper">
              <div class="wrapper-img">
                <img v-if="index%2===0" :src="meImg" class="header-img" />
              </div>
            </div>
          </div>
        </div>
        <div class="chat-input">
          <el-input
            v-model.trim="searchValue"
            placeholder="请输入您想咨询的问题..."
            class="input-with-select"
            @keyup.enter.native="onSend"
            :disabled="disabled"
          ></el-input>
          <div class="sendImg">
            <img :src="sendImg" v-if="!isQuestionIng" @click="onSend" />
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ChatWindow',
    data() {
      return {
        chatList: [
          { content: '介绍中国\n\n中国是世界上人口最多的国家，也是世界第二大经济体。中国拥有悠久的历史和丰富的文化遗产，拥有众多的世界遗产和旅游景点。中国是联合国安全理事会的常任理事国，并是世界贸易组织的创始会员国。近年来，中国在经济、科技、教育、文化等领域取得了快速发展。中国是全球制造业的重要基地，也是世界上最大的出口国之一。中国在高铁、电子商务、移动支付等领域拥有领先的技术和创新能力。中国政府高度重视环境保护和可持续发展，积极推动绿色发展和低碳转型。中国是全球最大的可再生能源生产国和消费国，也是全球最大的新能源汽车市场。中国积极参与全球事务，提出了一系列倡议和合作机制，如"一带一路"倡议、亚洲基础设施投资银行等。中国也是联合国可持续发展目标的积极践行者，致力于推动全球发展和合作。总的来说，中国是一个具有重要影响力和发展潜力的国家，正在努力实现经济的高质量发展，推动社会进步和民生改善，同时也积极参与全球事务，为世界的和平与发展做出贡献。' }
        ],
        searchValue: '',
        disabled: false,
        isQuestionIng: false,
        otherImg: 'https://via.placeholder.com/60x60/16447C/FFFFFF?text=AI',
        meImg: 'https://via.placeholder.com/60x60/3A94F4/FFFFFF?text=ME',
        sendImg: 'https://via.placeholder.com/26x26/01FFFF/16447C?text=→',
        fit: 'cover'
      }
    },
    methods: {
      onSend() {
        if (!this.searchValue.trim()) return;
        
        const newQuestion = {
          content: this.searchValue
        };
        
        this.chatList.push(newQuestion);
        this.searchValue = '';
        this.isQuestionIng = true;
        
        // Simulate AI response after delay
        setTimeout(() => {
          this.chatList.push({
            content: '这是对"' + newQuestion.content + '"的模拟回答。在实际应用中，这里会显示AI生成的回答内容。'
          });
          this.isQuestionIng = false;
          this.$nextTick(() => {
            this.$refs.chatList.scrollTop = this.$refs.chatList.scrollHeight;
          });
        }, 1000);
      }
    }
  }
  </script>
  
  <style scoped>
  /* 中区 */
  .chat-wrapper {
    height: 100%;
    /* // AI区 */
    .chat-top {
      width: 100%;
      height: 88%;
      background-image: url("https://huaban.com/pins/5729811996?modalImg=https%3A%2F%2Fgd-hbimg.huaban.com%2Fc2784e60f9bf5281f52364c444433bdba95e2a10a5465-aXjiX6_fw1200");
      background-size: 100% 100%;
      padding: 20px;
      font-size: 16px;
      font-family: Arial, sans-serif;
      .AITip {
        height: 10%;
        color: #01ffff;
        font-size: 24px;
        padding-bottom: 4px;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        line-height: 1;
      }
      .chat-main {
        width: 100%;
        height: 84%;
        padding: 20px 30px;
        overflow-y: auto;
        background-image: url("https://huaban.com/pins/5729811996?modalImg=https%3A%2F%2Fgd-hbimg.huaban.com%2Fc2784e60f9bf5281f52364c444433bdba95e2a10a5465-aXjiX6_fw1200");
        background-size: 100% 100%;
        .no-message {
          width: 50%;
          height: 100%;
          font-size: 40px;
          font-family: Arial, sans-serif;
          text-align: center;
          margin: 0 auto;
          display: flex;
          justify-content: center;
          flex-direction: column;
          span:nth-child(1) {
            font-size: 34px;
          }
          img {
            display: block;
            width: 100%;
            height: 14px;
            margin-top: -12px;
          }
        }
        /* // 单条信息 */
        .chat-item {
          display: flex;
          justify-content: space-between;
          text-align: left;
          position: relative;
          margin-bottom: 50px;
          /* // 头像 */
          .header-img-wrapper {
            width: 60px;
            height: 65px;
            .wrapper-img {
              background-image: url("https://huaban.com/pins/5729811996?modalImg=https%3A%2F%2Fgd-hbimg.huaban.com%2Fc2784e60f9bf5281f52364c444433bdba95e2a10a5465-aXjiX6_fw1200");
              background-size: 100% 100%;
              display: flex;
              justify-content: center;
              align-items: flex-end;
              .header-img {
                width: 60px;
                height: 60px;
                border-radius: 50%;
              }
            }
          }
          /* // 内容 */
          .content {
            flex: 1;
            color: #ffffff;
            margin: 0 30px;
            padding: 16px 20px;
            border: 2px solid #2da8f0;
            border: 2px solid rgba(31, 159, 191, 0.9);
            border-radius: 10px;
            background: rgba(22, 68, 124, 0.8);
            background: linear-gradient(0deg, #125eab 0%, #3a94f4 100%);
            line-height: 30px;
            position: relative;
            white-space: pre-line;
            .itemTime {
              position: absolute;
              top: -36px;
              left: 46%;
              width: 50px;
              height: 20px;
              background: rgba(22, 68, 124, 0.8);
              text-align: center;
              font-size: 14px;
              line-height: 18px;
            }
          }
        }
        .chat-item.question .indicator {
          width: 0;
          height: 0;
          border-top: 10px solid transparent;
          border-bottom: 10px solid transparent;
          border-right: 10px solid rgba(31, 159, 191, 0.9);
          border-right: 10px solid #2da8f0;
          position: absolute;
          left: -10px;
          top: 16px;
        }
        .chat-item.answer .indicator {
          width: 0;
          height: 0;
          border-top: 10px solid transparent;
          border-bottom: 10px solid transparent;
          border-left: 10px solid rgba(31, 159, 191, 0.9);
          border-left: 10px solid #2da8f0;
          position: absolute;
          right: -10px;
          top: 16px;
        }
  
        .chat-item:not(:first-child) {
          margin-top: 38px;
        }
      }
      .chat-input {
        width: 100%;
        height: 11%;
        background-image: url("https://huaban.com/pins/5729811996?modalImg=https%3A%2F%2Fgd-hbimg.huaban.com%2Fc2784e60f9bf5281f52364c444433bdba95e2a10a5465-aXjiX6_fw1200");
        background-size: 100% 100%;
        padding-right: 2%;
        margin: 3% auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        /deep/ .el-input__inner {
          background-color: transparent;
          border: none;
          color: #fff;
        }
        .sendImg {
          width: 26px;
          height: 26px;
          cursor: pointer;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    } 
  }
  </style>